<template>
  <div class="hello">
      <div id="main" style="width: 1500px;height: 1000px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
let myChart = null;
export default {
  name: 'HelloWorld',
  data(){
    return {
      originData:[],
      option:{
        tooltip: {
          trigger: 'axis'
        },
        xAxis:{
          type:'time',
          name:'s',
          axisLine:{
            show: true,
            onZero: false,
            symbol: ['none','arrow']
          }
        },
        yAxis:{
          type:'value'
        },
        series:[
          {
            type: 'line',
            data:[],
            symbol:'circle',

            emphasis:{
              disabled: true
            },
            smooth:true,
            animation: false,
            markPoint:[]
          }
        ]
      },
      markedPoint:[]
    }
  },
  mounted() {
    this.$bus.$on('breathData',data => {
        const obj = data.map(item => {
          const isMarked = item.mark.trim() !== '';
          const isZ = item.mark === 'Z'
            return {
              value: [item.timeStamp,item.data],
              itemStyle:{
                color: isMarked?(isZ ? 'rgb(255,0,0)': 'rgb(0,255,0)'): '#000',
                borderColor: isMarked?(isZ ? 'rgb(255,0,0)': 'rgb(0,255,0)'): '#000',
                borderWidth: isMarked? 10: 0
              },

            }
        })
        this.originData = [...this.originData,...obj];
      myChart = echarts.init(document.getElementById('main'));
// 绘制图表
      myChart.setOption(this.option);
      this.render()
    })
  },
  methods:{
    render(){
      myChart.setOption({
        series:[
          {
            data: this.originData,
          }
        ]
      })
    }
  }
}
</script>


